<script setup lang="ts">
import { Icon as IconifyIcon } from '@iconify/vue'
import { isExternalUrl } from '@/utils/validate'

// 注意withDefaults()给默认值后解构会失去响应式
// const { iconName, customClass } = withDefaults(
//   defineProps<{
//     iconName: string
//     customClass?: string
//   }>(),
//   {
//     iconName: ''
//   }
// )

const { iconName, customClass } = defineProps({
  iconName: {
    type: String,
    default: ''
  },
  customClass: {
    type: String,
    default: ''
  }
})

const isExt = computed(() => isExternalUrl(iconName))
const svgClass = computed(() => (customClass ? `icon ${customClass}` : 'icon'))
// 如果iconName是带协议的图标链接 则通过style css属性方式渲染
const styleExternalIcon = computed(() => ({
  mask: `url(${iconName}) no-repeat 50% 50%`,
  '-webkit-mask': `url(${iconName}) no-repeat 50% 50%`,
  'mask-size': 'cover'
}))
</script>

<template>
  <IconifyIcon
    :class="svgClass"
    :icon="iconName"
    v-if="!isExt"
    v-bind="$attrs"
  ></IconifyIcon>
  <div
    v-else
    :style="styleExternalIcon"
    :class="svgClass"
    bg-current
    v-bind="$attrs"
  ></div>
</template>

<style scoped lang="scss"></style>
